<template>
<view>
	<view class="fixed w-100 h-100 top0 left0 ov-hd-y">
		<Header />
		<swiper class="swiper w-100 h592" @change="change" :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval"
			:duration="duration">
			<swiper-item v-for="item in list" :key="item.id">
				<ImageFile :url="item.thumbnail" className="w-100 h-100"/>
			</swiper-item>
		</swiper>
		<SwiperBot class="re bottom176" :current="current" :list="list"></SwiperBot>
		<view class="w-100 w-t-f re bg-f8ff re">
			<view class="w-100 px-2-6 pt-4 ">
				<view class="bg-white w-100 h72 show0 circle28 f-b-c">
					<input v-model="query.name" class="uni-input font24 t-20 pl-2 w480 h60" placeholder="商品名称搜索" />
					<view class="f-c-c w156 h58 font24 t-0 font600 bg-theme circle20 mr-05" @click="get_mall_list">搜索</view>
				</view>
			</view>
			<view class="py-4">
				<UserLogin></UserLogin>
			</view>
			
			<view class="w-100 px-2-6">
				<view class="w-100 h1 bg-ccc"></view>
				
				<view class="w-100 f-b-c h76 font25 t-0 font400">
					<text>今日推荐</text>
					<view class="f-y-c h76" @click="get_more">更多 <image src="../../static/icon_right_0.png" class="w22 h22" /></view>
				</view>
				
				<scroll-view class="scroll-view_H uni-scroll" scroll-x="true" v-if="shop_list_nice.length">
					<view class="w222 h298 mr-2 circle12 ov-hd" style="display: inline-block; margin-right: 16rpx;" v-for="(item,index) in shop_list_nice" :key="item.id" @click="set_shop(item)">
						<ImageFile :url="item.thumbnail" className="w222 h222"/>
						<view class="w-100 h88 bg-theme mt-f10 re px-1 pt-1">
							<HornMarginTheme type="left-top"></HornMarginTheme>
							<view class="w-100 font24 font600 t-0">{{item.name}}</view>
							<view class="w-100 h24 f-y-c font24 t-20 font600"><text class="font20 font400">¥</text>{{item.price}}</view>
						</view>
					</view>
				</scroll-view>
				
				<view v-else class="w-100 py-3 font28 f-c-c t-8">暂无推荐内容</view>
				
				<view class="w-100 h1 bg-ccc my-4"></view>
				
				<view class="w-100 h80 bg-theme_3 circle28">
					<scroll-view class="scroll-view_H uni-scroll px-1" @scroll="scroll" scroll-x="true" scroll-with-animation :scroll-left="scroll_left">
						<view class="ty-li mt-1" v-for="(item,index) in shop_type_nav" :key="item.id" @click="set_shop_type(item.id,index)">
							<view class="circle20 h60 font25 font600 px-5 f-c-c" :class="shop_type_code==item.id?'bg-theme t-20':'t-w'">
								{{item.name}}
							</view>
						</view>
					</scroll-view>
				</view>
				
				<view class="w-100 fs-b-b pt-3">
					<view class="w340 h452 mb-2 circle20 show0 ov-hd" v-for="(item,index) in shop_list" :key="item.id" @click="set_shop(item)">
						<ImageFile :url="item.thumbnail" className="w340 h378"/>
						<view class="w-100 h90 bg-theme mt-f20 re px-1 pt-1">
							<HornMarginTheme type="left-top"></HornMarginTheme>
							<view class="w-100 font24 font600 t-20">{{item.name}}</view>
							<view class="w-100 h24 f-y-c font24 t-20 font600"><text class="font18 font400">¥</text>{{item.price}}</view>
						</view>
					</view>
					<view class="w-100 t-a font24 t-3 pt-12 pb-1" v-if="!shop_list.length">暂无数据</view>
				</view>
			</view>
			
			<Horn type="left-top"/>
		</view>
		
		<view class="w-100 h200 bg-f8ff"></view>
	</view>
	
	<Footer index="shop"></Footer>
</view>
</template>

<script>
	import Footer from "../../components/footer.vue" //底部导航
	import SwiperBot from "../../components/swiper-bot.vue"  // swiper面板
	import Horn from "../../components/horn.vue"  // 转角
	import UserLogin from "../../components/user_login.vue"  // 用户登录信息
	import Header from "../../components/header.vue"
	import HornMarginTheme from "../../components/horn_margin_theme.vue"
	import ImageFile from "../../components/img_file.vue"
	
	import {banner_list} from "../../api/mall.js"
	
	import {mallList,mallChooseList} from "../../api/shop.js"
	
	export default{
		components:{
			Footer,
			SwiperBot,
			Horn,
			UserLogin,
			Header,
			HornMarginTheme,
			ImageFile,
		},
		data(){
			return{
				indicatorDots: true,
				autoplay: true,
				interval: 8000,
				duration: 500,
				list: [],
				current: 0,
				height_show: true, // 设计为一屏 按照812设置 低于这个高度 需要底部撑起来
				shop_list:[],
				shop_list_nice:[],
				shop_type_nav:[],
				shop_type_code:'',
				scroll_left: 0,
				old: {
					scroll_left: 0
				},
				query:{
					currentPage:1,
					pageSize:10,
					name:"",
					categoryId:'', // 分类id
					type:1, //类型 1：金额购买/2：积分兑换
				}
			}
		},
		created() {
			this.get_banner_list()
			this.get_mall_list()
			this.get_mall_list_nice()
			this.get_mall_choose_List()
			const {screenHeight} = uni.getStorageSync("systemInfo")
			//设计为一屏 按照812设置 低于这个高度 需要底部撑起来
			this.height_show = screenHeight >= 812
		},
		methods:{
			scroll(e) {
				console.log(e)
				this.old.scroll_left = e.detail.scrollLeft
			},
			async get_banner_list(){
				const {code,body} = await banner_list({goodsType:'MALL'})
				if(code === '0'){
					this.list = body.records 
				}
			},
			change(e) {
				this.current = e.detail.current;
			},
			set_shop_type(val,index){
				this.shop_type_code = val
				this.query.categoryId = val
				this.get_mall_list()
				this.scroll_left = this.old.scroll_left
				this.$nextTick(function() {
					this.scroll_left = ((index-1) * 60)
				});
			},
			// 获取商品列表
			async get_mall_list(){
				const {body:{records},code} = await mallList(this.query)
				if(code === '0'){
					this.shop_list = records || []
				}
			},
			async get_mall_list_nice(){
				const {body:{records},code} = await mallList({...this.query,recommend:true})
				if(code === '0'){
					this.shop_list_nice = records || []
				}
			},
			async get_mall_choose_List(){
				const {body,code} = await mallChooseList()
				if(code === '0'){
					this.shop_type_nav = [{id:'',name:'全部'}, ...body]
				}
			},
			set_shop(val){
				uni.setStorageSync("shop_details",val)
				uni.navigateTo({
					url:"/pages/shop/details"
				})
			},
			get_more(){
				uni.navigateTo({
					url:"/pages/shop/recommend"
				})
			}
		}
	}
</script>
<style scoped lang="scss">
	.swiper {
		image {
			width: 100%;
			height: 100%;
		}
	}
	.w-t-f{
		margin-top: -166rpx;
		border-radius: 0 80rpx 0 0;
	}
	.ty-line{
		width: 1rpx;
		height: 68rpx;
		top: 32rpx;
		background: #ccc;
	}
	.mt-f10{
		margin-top: -12rpx;
		border-radius: 0 12rpx 0 0 ;
	}
	.mt-f20{
		margin-top: -12rpx;
		border-radius: 0 20rpx 0 0 ;
	}
	.scroll-view_H{
		white-space: nowrap;
		width: 100%;
		box-sizing: border-box;
	}
	.ty-li{
		display: inline-block;
	}

</style>
